import React, { useEffect, useRef } from 'react'
import style from './App.module.scss'
import PanelList from '@/components/PanelList'
import SaleDataCard from '@/components/SaleDataCard'
import useCountdown from '@/hooks/useCountdown'
import { ConfigProvider, Progress, type TableProps } from 'antd';
import ProgressBarCard from '@/components/ProgressBarCard'
import { generateDataArray, generatePerson, getAssetPath } from './utils'
import CarouselComp from './components/CarouselComp'
import autofit from 'autofit.js'
import Time from './components/Time'
import ModalOrder from './components/ModalOrder'
import { orderCountStore } from './store'
import Marquee from "react-fast-marquee";
import ReactSeamlessScroll, { SeamlessScrollInstance } from 'seamless-scroll-react';
const columns: TableProps['columns'] = [
  {
    title: "",
    dataIndex: "rw",
    align: "center",
    render(_, record) {
      return <img className='w-[30px]' src={getAssetPath(`${record.dataIndex}.png`)} alt="" />
    },
  },
  {
    title: "排名",
    dataIndex: "pm",
    align: "center",
    render(_, __, index) {
      let ele = undefined
      if (index + 1 <= 3) {
        ele = <img src={getAssetPath(`No.${index + 1}.png`)} className='w-[20px]' alt="" />
      } else {
        ele = <span>{index + 1}</span>
      }
      return (
        <div className='flex justify-center items-center'>
          {ele}
        </div>
      )
    }
  },
  {
    title: "姓名",
    dataIndex: "xm",
    align: "center"
  },
  {
    title: "公司",
    dataIndex: "bm",
    align: "center"
  },
  {
    title: "职位",
    dataIndex: "zw",
    align: "center"
  },
  {
    title: "销售额",
    dataIndex: "xse",
    align: "center",
    render(value) {
      return <span>￥{value}万</span>
    }
  },
]

const columns2: TableProps['columns'] = [
  {
    title: "",
    dataIndex: "rw",
    align: "center",
    render(_, record) {
      return <img className='w-[30px]' src={getAssetPath(`${record.dataIndex}.png`)} alt="" />
    },
  },
  {
    title: "排名",
    dataIndex: "pm",
    align: "center",
    render(_, __, index) {
      let ele = undefined
      if (index + 1 <= 3) {
        ele = <img src={getAssetPath(`No.${index + 1}.png`)} className='w-[20px]' alt="" />
      } else {
        ele = <span>{index + 1}</span>
      }
      return (
        <div className='flex justify-center items-center'>
          {ele}
        </div>
      )
    }
  },
  {
    title: "姓名",
    dataIndex: "xm",
    align: "center"
  },
  {
    title: "公司",
    dataIndex: "bm",
    align: "center"
  },
  {
    title: "台数",
    dataIndex: "countM",
    align: "center"
  },
  {
    title: "签单金额",
    dataIndex: "moneyM",
    align: "center",
    render(val) {
      return <span>{val}万</span>
    },
  }
]
const dataSource = generatePerson().sort((a, b) => b?.xse! - a?.xse!).slice(0, 5)
const dataSource2 = generatePerson().sort((a, b) => b?.moneyM! - a?.moneyM!).slice(0, 3)

console.log(dataSource2);

let refData = generateDataArray(7)
const titleDataArr = [
  { name: "容太科技已完成", val: 8963, unit: "万" },
  { name: "容太机械已完成", val: 8617, unit: "万" }
]
const percentVal = parseFloat((titleDataArr.reduce((acc, cur) => acc + cur.val, 0) / 35000 * 100).toFixed(1))

const now = new Date();
const endOfYear = new Date(now.getFullYear(), 11, 31, 23, 59, 59, 999);
const diff = Number(endOfYear) - Number(now) // 时间差（毫秒）

const App: React.FC = () => {
  const ref = React.useRef<SeamlessScrollInstance>(null);
  const { orderCount: saleCardDatas } = orderCountStore()
  useEffect(() => {
    autofit.init({
      dh: 929,
      dw: 1920,
      el: "#root",
      resize: true,
    }, false)
    return () => {
      autofit.off()
    }
  }, [])
  useEffect(() => {
    const timer = setInterval(() => {
      refData = generateDataArray(7)
    }, 3000)
    return () => {
      clearInterval(timer)
    }
  }, [])
  const startTime = useRef(new Date().getTime() + diff)
  const startTime1 = useRef(new Date().getTime() + 3280 * 24 * 60 * 60 * 1000)
  const { days, hours, minutes, seconds } = useCountdown(startTime.current)
  const { days: days1, hours: hours1, minutes: minutes1, seconds: seconds1 } = useCountdown(startTime1.current)
  const setNumberStyle = (num: number | string, dot: boolean = false) => {
    const array = String(num).split("")
    return array.map((digit, index) => (
      <>
        <span key={index} className={`digit`}>
          {digit}
        </span>{dot ? index !== array.length - 1 && <span className='size-1 bg-white inline-block mr-[5.5px]'></span> : ""}
      </>
    ))
  }

  return (
    <div className={`${style.app} relative`}>
      {/* 大标题，抬头 */}
      <img src={getAssetPath(`title.png`)} alt="" />
      {/* 最左边年度销售面板 */}
      <div className='sales-target w-[43.8%] h-[94%] absolute z-10 left-[1.2%] top-[4%] flex'>
        <div className='left w-[60%] h-full flex flex-col mr-[50px]'>
          {/* <img src={getAssetPath(`left-title.png`)} className='mb-3' alt="" /> */}
          <div className='sale-target mb-3 flex flex-col'>
            <span className='font-bold tracking-[5px] text-[18px] mb-2.5'>年度销售目标{setNumberStyle(35, true)}亿</span>
            <ConfigProvider
              theme={{
                token: {
                  fontSize: 12,
                }
              }}
            >
              <Progress percent={percentVal} strokeColor="#0baaf6" status="active" size={{ height: 16 }} strokeLinecap="butt" trailColor="#515763" percentPosition={{ align: 'end', type: 'inner' }} />
            </ConfigProvider>
          </div>
          <div className='flex-1 panel p-2 flex flex-col border-[2px] border-[rgb(10,251,235)] rounded-[10px]'>
            <div className='title-data flex justify-between mt-5 h-8'>
              {/* <img src={getAssetPath(`left-panel-data.png`)} className='w-[45%]' alt="" />
              <img src={getAssetPath(`left-panel-data2.png`)} className='w-[45%]' alt="" /> */}
              {
                titleDataArr.map(v => (
                  <div key={v.name} className='text-[14px] tracking-[2px]'><span className='mr-1.5'>{v.name}</span>{setNumberStyle(v.val)}<span className='ml-0.5'>{v.unit}</span></div>
                ))
              }
            </div>
            <div className='flex-1 flex flex-col justify-evenly'>
              {/* 面板数据列表 */}
              <PanelList title='top5' dataSource={dataSource} columns={columns} className='mb-3.5' />
              <PanelList title='top3' dataSource={dataSource2} columns={columns2} />
            </div>
          </div>
        </div>
      </div>
      <div className='sale-card-box flex-1 w-[30%] h-[18%] flex flex-wrap justify-between absolute bottom-[6%] left-[32%] '>
        {
          saleCardDatas.map((saleCardData, index) => (
            <SaleDataCard key={index} value={saleCardData.value} className={index === saleCardDatas.length - 1 ? "" : 'mb-10'} valueColor={saleCardData.valueColor} title={saleCardData.title} />
          ))
        }
      </div>
      {/* 中间地图、倒计时 */}
      <div className='time-map flex justify-center items-end absolute top-[10%] left-[50%] translate-x-[-59%] tracking-[3px]'>距离完成年度目标：{setNumberStyle(days)}天{setNumberStyle(hours)}小时{setNumberStyle(minutes)}分钟{setNumberStyle(seconds)}秒</div>
      <div className='absolute top-[50%] left-[50%] translate-[-50%]'>
        <img src={getAssetPath("map.png")} alt="" className='w-[90%]' />
      </div>
      {/* 最右边研发进度、技术前瞻 */}
      <div className='schedule-prospect w-[33%] h-[90%] absolute z-10 right-[1.2%] top-[8%]  flex justify-between'>
        <div className='left w-[56%] flex flex-col border-2 p-4 border-[rgb(11,231,222)] rounded-[10px]'>
          <PanelList title='新品研发进度'>
            <div className='flex mt-4'>
              <Marquee speed={30}>
                {
                  Array.from({ length: 5 }, (_, index) =>
                    <img src={getAssetPath(`new-product${index + 1}.png`)} key={index} alt="" className='h-[120px] object-contain' />
                  )
                }
              </Marquee>
            </div>
          </PanelList>
          <PanelList title='生产订单进度' className='my-8'>
            <div className='flex flex-col mt-[20px]'>
              <ReactSeamlessScroll step={0.2} limitScrollNum={7} wrapperClassName='seamless-scroll' list={refData} ref={ref}>
                {
                  refData.map((v, i) => (
                    <ProgressBarCard key={i} {...v} className={i === refData.length - 1 ? "" : "mb-[20px]"} />
                  ))
                }
              </ReactSeamlessScroll>
            </div>
          </PanelList>
          <PanelList title='企业团队售后实况' className='flex-1 mt-2'>
            <div className='mt-2 flex flex-1 justify-between relative'>
              {/* <img src={getAssetPath("sbzs.png")} alt="" className='mt-15 w-[58%] h-[38%]' /> */}
              <div className='left mt-15 w-[75%] h-[38%]  flex flex-col text-[12px] absolute'>
                <span className='font-bold text-[17px] mb-4 '>设备正常运行总数：4762</span>
                <div className='flex flex-wrap w-full'>
                  <div className='flex items-center mb-6'><div className='size-[5px] mr-1 bg-[#ec5f5f]'></div>设备维修工单：9</div>
                  <div className='flex items-center ml-2 mb-6'><div className='size-[5px] mr-1 bg-[#5f9bec]'></div>设备调试工单：3</div>
                  <div className='flex items-center'><div className='size-[5px] mr-1 bg-[#68e0cf]'></div>设备保养工单：12</div>
                </div>
              </div>
              <img src={getAssetPath("pie-single.png")} alt="" className='mt-15 w-[40%] absolute right-[-4%]' />
            </div>
          </PanelList>
        </div>
        <div className='right w-[42%] flex flex-col border-2 p-4 border-[rgb(11,231,222)] rounded-[10px]'>
          <PanelList title='技术前瞻' className='flex-1 jsqz'>
            <div className='mt-[15px] flex-1'>
              <CarouselComp />
            </div>
          </PanelList>
          <div className='on-time text-[14px] tracking-widest mt-5 mb-8'>
            <div className='mb-1.5'>距离上市还有：</div>
            {setNumberStyle(days1)}天{setNumberStyle(hours1)}小时{setNumberStyle(minutes1)}分钟{setNumberStyle(seconds1)}秒
          </div>
          <PanelList title='企业团队实时情况' className='h-[30%] qytdss'>
            <div className='mt-[15px] flex-1 flex justify-center items-center'>
              <img src={getAssetPath(`team-time-charts.png`)} alt="" className='w-[100%] h-[48%]' />
            </div>
          </PanelList>
        </div>
      </div>
      {/* 时间组件、天气组件 */}
      <Time />
      {/* 弹出框 */}
      <ModalOrder />
    </div>
  )
}

export default App